<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=3,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<title>我的订单</title>
	<link href="css/public/reset-html5.css" rel="stylesheet">
	<link href="css/public/mui.min.css" rel="stylesheet">
	<link href="css/public/mui.picker.min.css" rel="stylesheet">
	<link href="css/wx-main.css?20161028_1" rel="stylesheet">
	<link rel="stylesheet" href="css/myorder.css">
	<style>
		.fix_item{
			padding:8px;
			border:1px solid #aaa;
			margin:10px 0;
		}
	</style>
</head>
<body id="main">
<header class="text-color1">
	<div class="repair" v-bind:class="{'active' : ordertype==0}"  v-on:click="getOrder(0)">维修订单</div>
	<div class="recycle" v-bind:class="{active : ordertype==1}" v-on:click="getOrder(1)">回收订单</div>
</header>

<div class="order-body">
	<div class="mui-card" v-show="!order_list.length&&!recycleOrders.length">
		<div class="mui-card-content">
			<div class="mui-card-content-inner">暂无订单数据</div>
		</div>
	</div>
	
	<!--维修订单-->
	<div class="mui-card" v-for="list in order_list" v-on:click="go_order_info(list.order_id)">
		<table>
			<tr>
				<th colspan="2">
					<span>订单编号:</span>
					<span v-text="list.order_num"></span>
					<span class="mui-pull-right" v-text="list.status | getStatus" style="padding-right:10px;"></span>
				</th>
			</tr>
			<tr>
				<td colspan="2"><span>下单时间 : </span><span v-text="list.ctime | getLocalTime"></span></td>
			</tr>
			<tr>
				<td colspan="2" style="text-align: center;">
					<div v-text="list.phone_name" style="text-align: center;font-size:18px;margin-bottom:8px;color:#ea7352;"></div>
					<div><span v-text="list.color"></span>, <span v-text="list.version"></span></div>
					<div>
						<div class="fix_item" v-for="i in list.data.fault_info">
							<span v-text="i.name"></span>
							<span style="color:#ea7352;">(<span class="price">{{i.price}}</span>)</span>
						</div>
					</div>
				</td>
			</tr>
			<tr>
				<td colspan="2" style="border-top:1px solid #ddd;color:#ea7352;">总价：<span v-text="list.price" class="price"></span></td>
			</tr>
		</table>
	</div>
	
	<!--回收订单-->
	<div class="mui-card recycle_order" v-for="list in recycleOrders" v-on:click="recycleOrderDetail(list)">
		<table>
			<tr>
				<th width="80">订单编号</th>
				<th>
					<span v-text="list.order_num"></span>
					<span class="mui-pull-right" v-text="status[list.status]"></span>
				</th>
			</tr>
			<tr>
				<td>下单时间</td>
				<td v-text="list.update_time"></td>
			</tr>
			<tr>
				<td>回收方式</td>
				<td v-text="ways[list.repair_way]"></td>
			</tr>
			<tr>
				<td>回收机型</td>
				<td v-text="list.v_name"></td>
			</tr>
			<tr>
				<td>预估费用</td>
				<td><span v-text="list.valuation" class="price"></span></td>
			</tr>
		</table>
	</div>
</div>
</body>
<script src="js/public/jquery-2.2.1.min.js"></script>
<script src="../plugins/vue/vue.min.js"></script>
<script src="js/phone.js"></script>
<script src="layer_mobile/layer.js"></script>
<script>
	Date.prototype.Format = function (format) {
		var date = {
			"M+": this.getMonth() + 1,
			"d+": this.getDate(),
			"h+": this.getHours(),
			"m+": this.getMinutes(),
			"s+": this.getSeconds(),
			"q+": Math.floor((this.getMonth() + 3) / 3),
			"S+": this.getMilliseconds()
		};
		if (/(y+)/i.test(format)) {
			format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
		}
		for (var k in date) {
			if (new RegExp("(" + k + ")").test(format)) {
				format = format.replace(RegExp.$1, RegExp.$1.length == 1
					? date[k] : ("00" + date[k]).substr(("" + date[k]).length));
			}
		}
		return format;
	}
	
	Vue.filter('getLocalTime', function (value) {
		var d = new Date();
		
		//转换毫秒
		d.setTime(value * 1000);
		return d.Format("yyyy-MM-dd hh:mm");
	});
	
	Vue.filter('getStatus', function (value) {
		var status = '';
		switch (parseInt(value)) {
			case 1:
				status = '已下单';
				break;
			case 2:
				status = '已下单';
				break;
			case 3:
				status = '待维修';
				break;
			case 4:
				status = '待付款';
				break;
			case 5:
				status = '待评价';
				break;
			case 6:
				status = '已完成';
				break;
		}
		return status;
	});
	
	var vue = new Vue({
		el: "#main",
		data: {
			order_list: [],
			recycleOrders:[],
			ordertype:0,
			status:recycleStatus,
			ways:["", "上门回收", "到店回收"]
		},
		methods: {
			//获取订单，type==0是维修订单，type==1是回收订单
			'getOrder': function (type) {3
				var that = this;
				that.ordertype = type;
				var api = type==0?
						apiRepair+"index.php?m=Home&c=Order&a=getMyOrder":
						apiRecycle+"index.php/Home/User/get_order_list";
				var index = layer.open({type: 2,shadeClose:false});
				$.post(api, {}, function (res) {
					if (res.code == 200 || res.code == 201) {
						vue.order_list=[];
						vue.recycleOrders=[];
						
						type==0?vue.order_list=res.data: vue.recycleOrders=res.data;
					} else if (res.code == 0) {
						login();
					}
					layer.close(index);
				}, 'json');
			},
			'go_order_info': function (id) {
				location.href = "order_info.html?order_id=" + id;
			},
			"recycleOrderDetail":function(order){
				location.href = "recycle_order_info.html?rid=" + order.rid;
			}
		},
		ready: function () {
			this.getOrder(0);
		}
	});
</script>
</html>